<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .banner{
        width: 300px;
        margin: 0px auto;

    }
    .box{
        width: 280px;
        height: 40px;
        background: rgb(90,0,136)  url("img/loading.png") no-repeat 15px center;
        background-size: 16px;
        border-radius: 15px;
        position: relative;
    }
    input:nth-of-type(1){
        height: 23px;
        width: 180px;
        position: absolute;
        left: 44px;
        top: 8px;
        border-radius: 10px;
        border: 0px;
        outline: none;
        background:rgb(255,255,255) url("img/jd.png") no-repeat 10px center ;
        text-align: center;
    }
    input:nth-of-type(2){
        position: absolute;
        left: 235px;
        top: 10px;
        border: 0px;

    }
    a{
        position: relative;
        left: 230px;
        top: 12px;
        color: #fffdef;
        text-decoration: none;
        font-size: 14px;
        font-family: 宋体;
    }
    img:nth-of-type(1){
        position: absolute;
        left:71px;
        top: 12px;
    }
    img:nth-of-type(2){
        position: absolute;
        left:82px;
        top: 12px;
    }
</style>
<body>
<a href="index.html" style="color: red">作业一</a>
<a href="demo.html" style="color: red">作业二</a>
<a href="home.html" style="color: red">作业三</a>
<div class="banner">
    <div class="box">
        <input type="text" placeholder="usb分线器">
        <img src="img/首页_竖杠_时间提醒.png" alt="">
        <img src="img/放大镜.png" alt="">
        <a href="">登录</a>
    </div>
</div>
</body>

</html>